// src/components/Sidebar.jsx
import { useNavigate } from 'react-router-dom';
import { Layout, Menu, type MenuProps } from 'antd';
import styles from './style.module.scss';

const { Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];
export default function Sidebar() {
  const navigate = useNavigate();
  function getItem(label: React.ReactNode, key: string, icon?: React.ReactNode, children?: MenuItem[], type?: 'group'): MenuItem {
    return {
      key,
      icon,
      children,
      label: <div onClick={() => (key.startsWith('/') ? navigate(key as string) : undefined)}>{label}</div>,
      type,
    } as MenuItem;
  }

  const items: MenuItem[] = [
    getItem('首页', '/', null),

    getItem('仪表盘', 'dashboard', null, [getItem('详情', '/dashboard'), getItem('分析', '/dashboard/analytics')], 'group'),

    getItem('用户', 'users', null, [getItem('用户列表', '/users'), getItem('用户信息', '/users/1231212')], 'group'),
  ];

  return (
    <Sider className={styles.sider}>
      <Menu defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} mode='inline' items={items} />
    </Sider>
  );
}
